<template>
  <a-modal
    title="貨品管理"
    :width="760"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading" style="padding:15px 25px;">
      <a-form :form="form" v-bind="formLayout">
        <a-row class="form-row" :gutter="48">
          <div v-for="(v, k) in fields" :key="k">
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item :label="v.label">
                <template v-if="v.type == 'select'">
                  <a-select
                    v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]"
                    @change="v.onChange">
                    <a-select-option :key="sk" v-for="(item,sk) in selectList[v.listName]" :value="v.listValue?item[v.listValue]:item">{{
                      item[v.listLabel] }}
                    </a-select-option>
                  </a-select>
                </template>
                <template v-else-if="v.type == 'textarea'">
                  <a-textarea :auto-size="{ minRows: 5, maxRows: 10 }" v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]"/>
                </template>
                <template v-else-if="v.type == 'password'">
                  <a-input-password v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]" placeholder="請輸入密碼"/>
                </template>
                <template v-else-if="v.type == 'upload'">
                  <a-upload
                    name="file"
                    :showUploadList="false"
                    :customRequest="upload"
                  >
                    <a-button> <a-icon type="upload" /> Click to Upload </a-button>
                  </a-upload>
                  <span v-if="model!==null">{{ model[v.key] }}</span>
                </template>
                <template v-else-if="v.type == 'date'">
                  <a-date-picker valueFormat="yyyy-MM-DD" v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]" />
                </template>
                <template v-else-if="v.type == 'number'">
                  <a-input v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required, min: 0, message: v.message, type: 'number',transform(value){return Number(value)}}]}]"/>
                </template>
                <template v-else>
                  <a-input v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required, min: 0, message: v.message}]}]"/>
                </template>
              </a-form-item>
            </a-col>
          </div>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import pick from 'lodash.pick'
  // import { _getAll } from '@/api/category'
  import { _post, _put } from '@/api/goods'
  import { _getAll } from '@/api/category'

  // 表单字段
  const fields = [
    {
      key: 'idCat',
      label: '貨品類別',
      required: true,
      message: '',
      type: 'select',
      listName: 'categoryList',
      listValue: 'idCat',
      listLabel: 'name'
    },
    { key: 'no', label: '貨品編號', required: true, message: '' },
    { key: 'nameHk', label: '中文', required: true, message: '' },
    {
      key: 'type',
      label: '類型',
      required: true,
      message: '',
      type: 'select',
      listName: 'typeList',
      listValue: 'value',
      listLabel: 'label'
    },
    { key: 'unit', label: '單位', required: true, message: '' },
    { key: 'outOfStockThreshold', label: '缺貨閾值', required: true, message: '', type: 'number' },
    { key: 'earlyWarningDays', label: '提早多少天提示過期', required: true, message: '', type: 'number' },
    { key: 'nameEn', label: '英文', required: true, message: '' },
    { key: 'nameTha', label: '泰文', required: true, message: '' },
    {
      key: 'mainType',
      label: '主類別',
      required: true,
      message: '',
      type: 'select',
      listName: 'mainTypeList',
      listValue: 'value',
      listLabel: 'label'
    },
    { key: 'expirationDays', label: '过期日', required: true, message: '', type: 'number' },
    {
      key: 'isProduction',
      label: '是否为生产成品',
      required: true,
      message: '',
      type: 'select',
      listName: 'isProductionList',
      listValue: 'value',
      listLabel: 'label'
    }
  ]

  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      model: {
        type: Object,
        default: () => null
      }
    },
    data () {
      this.formLayout = {}
      return {
        form: this.$form.createForm(this),
        fields: fields,
        loading: false,
        selectList: {
          categoryList: [],
          typeList: [{ value: 0, label: '乾貨' }, { value: 1, label: '蔬菜' }],
          mainTypeList: [{ value: 0, label: '普通货品' }, { value: 1, label: '生鲜货品' }],
          isProductionList: [{ value: 0, label: '原料' }, { value: 1, label: '加工成品' }]
        }
      }
    },
    created () {
      // 防止表单未注册
      fields.forEach((v, i) => this.form.getFieldDecorator(v.key))
      // 当 model 发生改变时，为表单设置值
      this.$watch('model', () => {
        this.model && this.form.setFieldsValue(pick(this.model, fields))
      })
    },
    mounted () {
      _getAll().then(ret => (this.selectList.categoryList = ret.data))
    },
    methods: {
      // handler
      handleSubmit (e) {
        e.preventDefault()
        this.$emit('handleRefresh')
        this.form.validateFields((err, values) => {
          if (!err) {
            // 新增
            this.loading = true
            if (this.model != null && this.model.idGoo != null) {
              _put(this.model.idGoo, values).then((res) => this.handleSuccess(res))
            } else {
              _post(values).then((res) => this.handleSuccess(res))
            }
          }
        })
      },
      handleSuccess (ret) {
        this.loading = false
        if (ret.code === 0) {
          this.form.resetFields()
          this.$emit('cancel')
          this.$message.info(ret.msg)
        } else {
          this.$message.error('res.msg')
        }
      }
    }
  }

</script>
